import { View, Image, Text } from '@tarojs/components'
import React from 'react'
import './index.scss'

const FoodCard = ({ food, onFavorite, onClick }) => {
  const {
    id,
    name,
    price,
    time,
    type,
    image,
    rating,
    ratingCount,
    distance,
    tag,
    isFavorite
  } = food

  const handleFavorite = (e) => {
    e.stopPropagation()
    onFavorite?.(id)
  }

  const handleClick = () => {
    onClick?.(id)
  }

  return (
    <View className='food-card' onClick={handleClick}>
      <Image className='food-card__image' src={image} mode='aspectFill' />
      <View className='food-card__content'>
        <View className='food-card__header'>
          <Text className='food-card__title'>{name}</Text>
          <View 
            className={`food-card__favorite ${isFavorite ? 'is-active' : ''}`}
            onClick={handleFavorite}
          >
            <Text className='fa-solid fa-heart icon-heart' />
          </View>
        </View>
        <Text className='food-card__info'>{`¥${price} · ${time} · ${type}`}</Text>
        <View className='food-card__rating'>
          <View className='food-card__stars'>
            {[1, 2, 3, 4, 5].map(star => (
              <Text 
                key={star}
                className={`fa-solid fa-star icon-star ${star <= rating ? 'is-active' : ''}`}
              />
            ))}
          </View>
          <Text className='food-card__rating-count'>{`${rating} (${ratingCount}条评价)`}</Text>
        </View>
        <View className='food-card__footer'>
          <Text className='food-card__tag'>{tag}</Text>
          <Text className='food-card__distance'>
            <Text className='fa-solid fa-location-dot icon-distance' />
            {distance}
          </Text>
        </View>
      </View>
    </View>
  )
}

export default FoodCard 